<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <style>
      .profile-header {
        padding: 24px 16px;
        display: flex;
        align-items: center;
        background-color: white;
      }
      .profile-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 16px;
        border: 2px solid #f2f2f2;
      }
      .profile-name {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;
      }
      .profile-id {
        font-size: 14px;
        color: #666;
      }
      .profile-links {
        padding: 12px 16px;
        background-color: white;
        margin-top: 12px;
      }
      .profile-link-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #f2f2f2;
      }
      .profile-link-item:last-child {
        border-bottom: none;
      }
      .profile-link-left {
        display: flex;
        align-items: center;
      }
      .profile-link-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 18px;
        color: white;
      }
      .profile-link-text {
        font-size: 16px;
      }
      .profile-link-arrow {
        color: #ccc;
      }
      .section-divider {
        height: 8px;
        background-color: #f5f5f5;
      }
      .subscription-card {
        margin: 16px;
        background-color: white;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      }
      .subscription-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
      }
      .subscription-logo {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        margin-right: 12px;
        background: linear-gradient(135deg, #5851db, #e1306c, #fcaf45);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }
      .subscription-title {
        font-size: 18px;
        font-weight: 600;
      }
      .subscription-features {
        margin-bottom: 16px;
      }
      .subscription-feature {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 14px;
        color: #666;
      }
      .subscription-feature i {
        color: #007aff;
        margin-right: 8px;
      }
      .subscription-button {
        background-color: #007aff;
        color: white;
        text-align: center;
        padding: 10px;
        border-radius: 20px;
        font-weight: 500;
      }
      .download-history {
        padding: 16px;
        background-color: white;
        margin-top: 12px;
      }
      .download-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
      }
      .download-item {
        display: flex;
        margin-bottom: 16px;
      }
      .download-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        margin-right: 12px;
        object-fit: cover;
      }
      .download-info {
        flex: 1;
      }
      .download-name {
        font-size: 15px;
        margin-bottom: 4px;
      }
      .download-date {
        font-size: 12px;
        color: #999;
      }
      .download-action {
        display: flex;
        align-items: center;
      }
      .download-status {
        font-size: 13px;
        color: #999;
        margin-right: 8px;
      }
      .download-btn {
        background-color: #f2f2f2;
        font-size: 13px;
        padding: 6px 12px;
        border-radius: 16px;
        color: #666;
      }
    </style>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 顶部导航 -->
      <div
        class="flex justify-between items-center px-4 py-2 bg-white sticky top-0 z-10"
      >
        <div class="text-xl font-semibold">我的</div>
        <div>
          <a href="#" class="text-gray-600">
            <i class="fas fa-cog text-gray-600 text-lg"></i>
          </a>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content bg-gray-50 pb-20">
        <!-- 个人信息 -->
        <div class="profile-header">
          <img
            src="https://img.zcool.cn/community/01cb6559e0b31fa8012193a3f87c58.jpg@160w_160h_1c_1e_1o_100sh.jpg"
            alt="用户头像"
            class="profile-avatar"
          />
          <div>
            <div class="profile-name">张小明</div>
            <div class="profile-id">AppID: xiaoming@example.com</div>
          </div>
        </div>

        <!-- 订阅卡片 -->
        <div class="subscription-card">
          <div class="subscription-header">
            <div class="subscription-logo">
              <i class="fas fa-crown"></i>
            </div>
            <div class="subscription-title">应用商城会员</div>
          </div>
          <div class="subscription-features">
            <div class="subscription-feature">
              <i class="fas fa-check-circle"></i>
              <span>专属会员应用推荐</span>
            </div>
            <div class="subscription-feature">
              <i class="fas fa-check-circle"></i>
              <span>免费体验会员应用</span>
            </div>
            <div class="subscription-feature">
              <i class="fas fa-check-circle"></i>
              <span>优先获取应用更新</span>
            </div>
          </div>
          <div class="subscription-button">立即开通</div>
        </div>

        <!-- 快捷功能链接 -->
        <div class="profile-links">
          <div class="profile-link-item">
            <div class="profile-link-left">
              <div class="profile-link-icon" style="background-color: #ff9500">
                <i class="fas fa-wallet"></i>
              </div>
              <div class="profile-link-text">钱包</div>
            </div>
            <div class="profile-link-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="profile-link-item">
            <a href="#" class="w-full flex justify-between items-center">
              <div class="profile-link-left">
                <div
                  class="profile-link-icon"
                  style="background-color: #007aff"
                >
                  <i class="fas fa-cog"></i>
                </div>
                <div class="profile-link-text">设置</div>
              </div>
              <div class="profile-link-arrow">
                <i class="fas fa-chevron-right"></i>
              </div>
            </a>
          </div>
          <div class="profile-link-item">
            <div class="profile-link-left">
              <div class="profile-link-icon" style="background-color: #5ac8fa">
                <i class="fas fa-gift"></i>
              </div>
              <div class="profile-link-text">礼品卡</div>
            </div>
            <div class="profile-link-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="profile-link-item">
            <div class="profile-link-left">
              <div class="profile-link-icon" style="background-color: #4cd964">
                <i class="fas fa-users"></i>
              </div>
              <div class="profile-link-text">家庭共享</div>
            </div>
            <div class="profile-link-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>

        <!-- 下载历史 -->
        <div class="download-history">
          <div class="download-title">最近下载</div>
          <div class="download-item">
            <img
              src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/1c/d0/08/1cd0086f-3ebb-edac-45d0-e2ddb864eccf/AppIcon-0-0-1x_U007emarketing-0-0-0-5-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
              alt="应用图标"
              class="download-icon"
            />
            <div class="download-info">
              <div class="download-name">抖音</div>
              <div class="download-date">今天 12:30</div>
            </div>
            <div class="download-action">
              <span class="download-status">已下载</span>
              <button class="download-btn">打开</button>
            </div>
          </div>
          <div class="download-item">
            <img
              src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/05/16/67/051667e1-3d48-6978-51d4-90a57b4419e7/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
              alt="应用图标"
              class="download-icon"
            />
            <div class="download-info">
              <div class="download-name">原神</div>
              <div class="download-date">昨天 18:45</div>
            </div>
            <div class="download-action">
              <span class="download-status">已下载</span>
              <button class="download-btn">打开</button>
            </div>
          </div>
          <div class="download-item">
            <img
              src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/f5/77/96/f5779614-9cea-1212-3cdd-fbbf6f9d1bfc/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
              alt="应用图标"
              class="download-icon"
            />
            <div class="download-info">
              <div class="download-name">淘宝</div>
              <div class="download-date">3天前</div>
            </div>
            <div class="download-action">
              <span class="download-status">已下载</span>
              <button class="download-btn">打开</button>
            </div>
          </div>
        </div>

        <!-- 更多功能链接 -->
        <div class="profile-links">
          <div class="profile-link-item">
            <div class="profile-link-left">
              <div class="profile-link-icon" style="background-color: #ff2d55">
                <i class="fas fa-heart"></i>
              </div>
              <div class="profile-link-text">心愿单</div>
            </div>
            <div class="profile-link-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="profile-link-item">
            <div class="profile-link-left">
              <div class="profile-link-icon" style="background-color: #007aff">
                <i class="fas fa-bell"></i>
              </div>
              <div class="profile-link-text">通知</div>
            </div>
            <div class="profile-link-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="profile-link-item">
            <div class="profile-link-left">
              <div class="profile-link-icon" style="background-color: #8e8e93">
                <i class="fas fa-shield-alt"></i>
              </div>
              <div class="profile-link-text">隐私与安全</div>
            </div>
            <div class="profile-link-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="profile-link-item">
            <div class="profile-link-left">
              <div class="profile-link-icon" style="background-color: #34c759">
                <i class="fas fa-headset"></i>
              </div>
              <div class="profile-link-text">帮助与客服</div>
            </div>
            <div class="profile-link-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-comment-dots"></i>
          <span>消息</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../js/main.js"></script>
  </body>
</html>
